<template>
  <view :item="item" class="show-item">
    <view class="images">
      <image v-for="(item, index) in item.imgList" :key="index" :src="item" mode="aspectFit"></image>
    </view>
    <view class="description">
      <view class="title">{{ item.title }}</view>
      <view class="supplement">{{ item.description }}</view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({
      imgList: [],
      title: '未知',
      description: '请补充一段文字加以描述'
    })
  }
});
</script>

<style lang="scss" scoped>
.show-item {
  width: 43.2vw;
  height: 56.4vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .images {
    width: 43.2vw;
    height: 43.2vw;
    border-radius: 2.8vw;
    display: grid;
    grid-template-rows: 20.8vw 20.8vw;
    grid-template-columns: 20.8vw 20.8vw;
    grid-gap: 1.6vw;
    image {
      width: 20.8vw;
      height: 20.8vw;
    }
  }
  .description {
    font-size: 3.6vw;
    .title {
      color: black;
      height: 5.2vw;
      width: auto;
      line-height: 5.2vw;
      text-align: left;
      font-weight: bold;
    }
    .supplement {
      color: rgb(223, 223, 223);
      height: 5.2vw;
      width: auto;
      line-height: 5.2vw;
      text-align: left;
      font-weight: bold;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
  }
}
</style>
